<template>
  <div>
    <div id="header">
      <img id="logo" src="background.png" @click="loginOut"/>
      <div id="title">综合工具应用平台-Gadgets-V2.0</div>
    </div>
    <div id="menusDiv">
      <div id="menusContent" class="content-item">
        <!--    菜单树加载    -->
        <AuthorityTreeComponent :auth-id="0" auth-name="根菜单"/>
      </div>
    </div>
    <div id="contentDiv">
      <div ref="content-div" class="content">
        <div ref="content-view" :style="styObj" class="view-div">
          <router-view class="view-div-router"></router-view>
        </div>
    </div>
  </div>
</div>
</template>

<script>
import AuthorityTreeComponent from "@/components/tree/authority/AuthorityTreeComponent";

export default {
  components: {AuthorityTreeComponent},
  data(){
    return{
      styObj:{
        height:0
      }
    }
  },
  methods:{
    loginOut(){
      this.$parent.$emit("loginOutEvent");
    }
  },
  name:'App',
  mounted() {
    let contentHeight = window.innerHeight*0.77;
    this.styObj.height=contentHeight+'px';
    document.getElementById("menusContent").style.setProperty("height",window.innerHeight*0.77+"px");
  }
}
</script>

<style scoped>
.view-div-router{
  height: 100%;
  padding-top: 3px;
  overflow-y:auto;
}
#menusDiv{
  border-right: dodgerblue solid 3px;
  float: left;
  width: 19%;
  height: 78%;
  margin-left: 2px;
  margin-right: 2px;
  background-color: #e7f1fc;
  overflow:scroll;
  overflow-x: hidden;
  white-space: nowrap;
}
#contentDiv{
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
  color: #2c3e50;
  float: right;
  width: 80%;
}
#logo{
  cursor:pointer
}
</style>